<template>
  <h1 ref="title">
    {{ msg }}
  </h1>

  <p>
    Recommended IDE setup:
    <a
      href="https://code.visualstudio.com/"
      target="_blank"
    >VSCode</a>
    +
    <a
      href="https://marketplace.visualstudio.com/items?itemName=octref.vetur"
      target="_blank"
    >
      Vetur
    </a>
    or
    <a
      href="https://github.com/johnsoncodehk/volar"
      target="_blank"
    >Volar</a>
    (if using
    <code>&lt;script setup&gt;</code>)
  </p>

  <p>See <code>README.md</code> for more information.</p>

  <p>
    <a
      href="https://vitejs.dev/guide/features.html"
      target="_blank"
    >
      Vite Docs
    </a>
    |
    <a
      href="https://v3.vuejs.org/"
      target="_blank"
    >Vue 3 Docs</a>
  </p>

  <button
    type="button"
    @click="increase"
  >
    count is: {{ count }}
  </button>
  <p>
    Edit
    <code>components/HelloWorld.vue</code> to test hot module replacement.
  </p>
  <Demo />
</template>
<!-- 组合式API 语法糖 script setup
  可以理解为这段代码运行在Compositon API的setup函数中
-->
<script lang="ts" setup>
import { ref } from 'vue'
// tips: script setup 中定义的所有成员都会自动导出给模板使用，不用再单独export或者return
import Demo from './demo.vue'

const propsParent = defineProps({ // 接收props
  msg: {
    type: String,
    required: true
  },
  counts: {
    type: Number,
    required: true
  }
})
const emit = defineEmits(['increment'])
const count = ref(0)
// const msg = 'abc' // tips: 定义一个与props重名的属性，会覆盖掉props中的属性，模板中所用的msg会变成现在这个常量msg
const increase = () => {
  console.log('increase event')
  console.log('props msg', propsParent.msg) // tips：想访问父组件传入的props的数据，可用变量接收属性值
  count.value++
  emit('increment') // 等同于 this.$emit('increment')
}
</script>
<!-- <script lang="ts">
import { ref, defineComponent, PropType, onMounted } from 'vue'

interface User {
  name: string
  age: number
}

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: {
      type: String,
      required: true
    },
    counts: {
      type: Number,
      required: true
    },
    objt: { // 复杂类型数据，可通过PropType来帮助推断其类型
      type: Object as PropType<User>,
      default: () => {}
    }
  },
  setup: (props) => {
    const count = ref(0)
    const increase = () => {
      count.value++
    }
    // props.objt?.name // 复杂类型数据，可通过PropType来帮助推断其类型
    const foo = ref<{
      age: number
      msg: string
    } | null>(null)
    foo.value = {
      age: 1,
      msg: 'hello'
    }
    onMounted(() => {
      console.log(title.value)
    })
    const title = ref<HTMLHeadElement | null>(null)
    return {
      count,
      title,
      increase
    }
  }
})
</script>
-->
<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>
